<template>
  <div class="add-edit">
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="30%"
      center
    >
      <slot name="formDialog"></slot>
      <slot slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="addArea">确 定</el-button>
      </slot>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'EmperorKedeAddOrEdit',

  data () {
    return {
      visible: false
    }
  },

  props: {
    title: {
      type: String
    }
  },

  watch: {
    visible (val) {
      if (!val) {
        this.$parent.form = {}
        this.$parent.$refs.form.resetFields()
      }
    }
  },

  mounted () {},

  methods: {
    addArea () {
      this.$emit('addArea')
    }
  }
}
</script>

<style lang="less" scoped>
.add-edit {
  /deep/ .el-dialog {
    border-radius: 10px;
    .el-dialog__header {
      text-align-last: left;
      span {
        line-height: 22px;
        font-size: 16px;
        font-weight: 600;
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
          Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
          sans-serif;
        color: #333;
      }
    }
  }
}
</style>
